import Taro, { Config } from '@tarojs/taro'
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import './index.scss'
import { AtCard, AtSearchBar } from "taro-ui";
import Grid from "../../components/Grid/Grid";
import Card from "../../components/Card/Card";
import { login } from "../../service";

interface IState {
    value: string;
    current: number;
    duration: number,
    interval: number,
    isCircular: boolean,
    isAutoplay: boolean,
    hasIndicatorDots: boolean,
    imgUrls: any;
}

export default class Index extends Taro.Component {

    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: '首页',
        enablePullDownRefresh: true,
    };

    state = {
        value: '',
        current: 1,
        duration: 500,
        interval: 5000,
        isCircular: true,
        isAutoplay: true,
        hasIndicatorDots: true,
        imgUrls: [
            'https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180',
            'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180',
            'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180'
        ]
    } as IState;

    constructor() {
        super();
        this.state = {
            value: '',
            current: 1,
            duration: 500,
            interval: 5000,
            isCircular: true,
            isAutoplay: true,
            hasIndicatorDots: true,
            imgUrls: [
                'https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180',
                'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180',
                'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180'
            ]
        };
        // DATA_URLS
        // console.log(login({}));
        console.log(login({
            "username":"627289120@qq.com",
            "password":"123456",
            "type":0
        }));
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    componentDidShow() {
    }

    componentDidHide() {
    }

    onPullDownRefresh() {}

    onReload = () => {};

    onChange = (value) => {
        this.setState({
            value: value
        })
    };

    onActionClick = () => {
        console.log('开始搜索')
    };

    handleNavigate(type) {
        switch (type) {
            case 0: {
                console.log(type);
            }
                break;
            default: {
            }
        }
    }

    handleClick = (value, index) => {
        console.log(value, index);
    };

    render() {
        const {current, isAutoplay, duration, isCircular, interval, hasIndicatorDots, imgUrls} = this.state;
        return (
            <View className='color-card'>
                <AtSearchBar
                    actionName='搜索'
                    value={this.state.value}
                    onChange={this.onChange.bind(this)}
                    onActionClick={this.onActionClick.bind(this)}
                />
                <AtCard customStyle={'box-shadow'}>
                    <Swiper
                        indicatorColor='#999'
                        indicatorActiveColor='#333'
                        current={current}
                        duration={duration}
                        interval={interval}
                        circular={isCircular}
                        autoplay={isAutoplay}
                        indicatorDots={hasIndicatorDots}>
                        {
                            imgUrls.map((item, idx) => (
                                <SwiperItem key={idx}>
                                    <Image src={item}/>
                                </SwiperItem>
                            ))
                        }
                    </Swiper>
                </AtCard>
                <View>
                    <Grid
                        columnNum={4}
                        bold={true}
                        iconSize={0.4}
                        className='width-88'
                        data={
                            [
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E4%B9%A6%E5%9F%8E.png',
                                    value: '功能1'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E6%A6%9C%E5%8D%95.png',
                                    value: '功能2'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E7%AD%BE%E5%88%B0.png',
                                    value: '功能3'
                                },
                                {
                                    image: 'http://makefriends.bs2dl.yy.com/%E5%88%86%E7%B1%BB.png',
                                    value: '功能4'
                                }
                            ]
                        }/>
                </View>
                {/*<View style={{'margin': '15px 0 0 0', 'padding': '0 0 115px 0'}}>*/}
                {/*{*/}
                {/*imgUrls.map((item) => (*/}
                {/*<AtCard customStyle={{'margin': '15px 0 0 0'}}>*/}
                {/*<Image src={item} mode={'widthFix'} className='box-shadow' />*/}
                {/*</AtCard>*/}
                {/*))*/}
                {/*}*/}
                {/*</View>*/}
                <View style={{'margin': '10px 0 0 0', 'padding': '0 0 115px 0'}}>
                    {
                        imgUrls.map((item, index) => (
                            <Card title={'卡片'+ index}>
                                <Image className='detail_content_container_icon' src={item}/>
                                <View className='detail_content_container_content_groups'>
                                    <View className='detail_content_container_content_group'>
                                        <Text>Feels like</Text>
                                        <Text>1111</Text>
                                    </View>
                                    <View className='detail_content_container_content_group'>
                                        <Text>Humidity</Text>
                                        <Text>2222</Text>
                                    </View>
                                    <View className='detail_content_container_content_group'>
                                        <Text>Visibility</Text>
                                        <Text>3333</Text>
                                    </View>
                                    <View className='detail_content_container_content_group'>
                                        <Text>UV Index</Text>
                                        <Text>4444</Text>
                                    </View>
                                </View>
                            </Card>
                        ))
                    }
                </View>
            </View>
        )
    }
}
